<template>
  <div class="storeMap">
  		<div class="cafeStoreHeader border-bottom">
  			<div class="cafeStoreHeaderImg" @click="goBack">
					<img src="../../assets/image/cafe/goBack.png" alt="" />
				</div>
				<div class="cafeStoreHeaderTitle">
          <img src="../../assets/image/cafe/search.png" alt="">
					<input type="text" placeholder="请输入你想查找的4s店" @click="showCover" v-model="searchText">
          <span @click="search4s(searchText)">查找</span>
				</div>
			</div>
      <div class="topBar">
        <span @click="getItemAll">全部</span>
        <span @click="getItem(10001)">保养</span>
        <span @click="getItem(10003)">喷漆</span>
        <span @click="getItem(10002)">美容</span>
      </div>
    	<div id="container"></div>
    	<div v-if="isShow" class="storeInfo">
    		<div class="storeInfoContainer">
    				<div class="storeInfoImg">
		    				<img :src="storeData.SHOP_PHOTO" alt="" />
		    		</div>
		    		<div class="storeInfoText">
		    				<div class="storeInfoText1">
		    						<h2>{{storeData.SHOP_NAME}}</h2>
		    						<p>{{storeData.DISTANCE/1000|keepTwoDot}}km</p>
		    				</div>
		    				<div class="storeInfoText2">
		    						<p>{{storeData.SHOP_ADDRESS}}</p>
		    				</div>
		    				<div class="storeInfoText3">
		    						<p>服务品牌&thinsp;:&thinsp;{{storeData.MAIN_BRAND}}</p>
		    				</div>
		    		</div>
		    		<div class="storeInfoWay">
		    				<div class="storeInfoWayTel" @click="callTel">
		    					<img src="../../assets/image/cafe/telephone.png" alt="" />
		    					<!--注意a标签里面变量的写法start-->
		    					<a id="callTel" style="display:none;" :href="'tel:'+storePhone">拨打</a>
		    					<!--注意a标签里面变量的写法end-->
		    				</div>
		    				<div class="storeInfoWayGo" @click="goToWay(storeData.COORDINATE)">
		    					<img src="../../assets/image/cafe/goHere.png" alt="" />

		    				</div>

		    		</div>
    		</div>
    	</div>
      <div class="cover" v-show="isCover">
          <img src="../../assets/image/cafe/clear.png" class="clearImg" alt="" @click="clearSeach">
          <div class="historyBox" >
            <h3>历史搜索</h3>
            <div class="spanBox">
              <span v-for="word in searchList" @click="search4s(word)">{{word}}</span>
            </div>
          </div>
          <div class="hotBox">
            <h3>热门搜索</h3>
            <div class="spanBox">
             <!--  <span @click="getItem(10001)">保养</span><span @click="getItem(10003)">喷漆</span><span @click="getItem(10002)">美容</span> -->
             <span v-for="item in hotList" @click="search4s(item.KEYWORD)">{{item.KEYWORD}}</span>
            </div>
          </div>
      </div>
       <!-- <toast v-model="showdisc" type="text" text="没找到" position='top'></toast> -->
  </div>
</template>
<script>
/*4S门店地图*/
import {XHeader,Actionsheet,Popup,Alert,Previewer,Toast,Confirm} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
import positionDefault from '../../assets/image/cafe/111.png';
import positionSelected from '../../assets/image/cafe/222.png';
import location from '../../assets/image/cafe/yourLocation2.png';
export default {
  name:"storeMap",
  // 数据
  data(){

    return{
    	userId:'',
    	city:'',//城市
			latlgt:'',//经纬度
    	MAP:'',//地图实例
    	allData:[],//所有数据
    	yourPosition: {}, // 当前位置,经纬度表示
      isShow:false,//是否显示
      storeData:'',//门店数据
      storePhone:'',//门店电话
      selectType:1,//
      iconList:[],
      isCover:false,//是否显示遮罩层
      searchText:'',
      showdisc:false,
      searchList:[],//历史搜索列表
      hotList:[],
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){

    if (localStorage.getItem("historySearch")) {
       this.searchList = JSON.parse(localStorage.getItem("historySearch"))
    }else{
       this.searchList=[]
    }
    this.$fetchPost('/searchAction/get4SShopHotSearch').then(res=>{

        if(res.STATUS_CODE == 1){
            this.hotList = res.RESULT_DATA;

        }
    },err=>console.log(err));


  //   this.userId=getCookie('loginkey');
  //   this.city = sessionStorage.getItem('city');//城市
	// this.latlgt = sessionStorage.getItem('latlgt');//经纬度
  //   //获取4S店列表(3.9版本)
  //   let obj = {};
  //   obj.REGION = '';
  //   obj.COORDINATE = this.latlgt;
  //   obj.CITY = this.city;
  //   obj.MAINBRAND = '';
  //   obj.SORTING = 0;
  //   this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{
  //   				//console.dir(res);
  //           if(res.STATUS_CODE == 1){
  //           		this.allData = res.RESULT_DATA;
  //           }
  //   },err=>console.log(err));
    this.getItemAll();
  },
  // el被创建，并挂载到实例上
  mounted(){
			let that = this;
	    // 生成地图实例
	    that.MAP = new BMap.Map("container");
	    let point = new BMap.Point(114.02597366, 22.54605355);  // 创建点坐标
	    that.MAP.enableScrollWheelZoom();// 开启滚轮缩放
			that.MAP.addControl(new BMap.OverviewMapControl());			// 添加缩略地图控件
	    that.MAP.centerAndZoom(point, 16); // 初始化地图，设置中心点坐标和地图缩放级别
			// 获取定位
      that.getPosition();

  },
  // 方法（实例中的方法）-----------
  methods:{
      //清楚搜索记录；
      clearSeach(){
          localStorage.setItem("historySearch","");
          this.searchList=[];
      },
      search4s(searchText){
       //  console.log(searchText);
         if (!searchText) {
            return
         }
          this.isCover=false;
          this.$vux.loading.show({
              text: '查找中'
           });
           let that = this;
           // alert(that.MAP.removeOverlay(that.iconList[0]));
          for (var i = 0; i < that.iconList.length; i++) {
             that.MAP.removeOverlay(that.iconList[i])
          }

           let obj = {};
          obj.REGION = '';
          obj.COORDINATE = this.latlgt;
          obj.CITY = this.city;
          obj.MAINBRAND = '';
          obj.SORTING = 0;
          obj.SHOP_NAME = searchText
          this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{
                  //console.dir(res);
                if(res.STATUS_CODE == 1){
                    if(res.RESULT_DATA.length==0){
                        this.$vux.loading.hide();
                        this.$vux.toast.show({
                          type:'cancel',
                          text: '查找失败'
                       })
                      return;
                    }
                    // console.log(this.searchList)
                    if(this.searchList.indexOf(searchText)==-1){
                       this.searchList.push(searchText)
                    }

                    localStorage.setItem("historySearch",JSON.stringify(this.searchList))
                    this.allData = res.RESULT_DATA;
                    //alert(this.allData.length);
                    that.getPosition();

                }
          },err=>console.log(err));
      },
      getItemAll(){
          this.$vux.loading.show({
            text: '查找中'
          });
           let that = this;
          for (var i = 0; i < that.iconList.length; i++) {
             that.MAP.removeOverlay(that.iconList[i])
          }
          this.userId=getCookie('loginkey');
          this.city = sessionStorage.getItem('city');//城市
          this.latlgt = sessionStorage.getItem('latlgt');//经纬度
          //获取4S店列表(3.9版本)
          let obj = {};
          obj.REGION = '';
          obj.COORDINATE = this.latlgt;
          obj.CITY = this.city;
          obj.MAINBRAND = '';
          obj.SORTING = 0;
          this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{
                  //console.dir(res);
                  if(res.STATUS_CODE == 1){
                      this.allData = res.RESULT_DATA;
                      that.getPosition();
                  }
          },err=>console.log(err));
      },
      getItem(typeId){
          this.isCover=false;
          this.$vux.loading.show({
              text: '查找中'
           });
           let that = this;
           // alert(that.MAP.removeOverlay(that.iconList[0]));
          for (var i = 0; i < that.iconList.length; i++) {
             that.MAP.removeOverlay(that.iconList[i])
          }

          this.userId=getCookie('loginkey');
          this.city = sessionStorage.getItem('city');//城市
          this.latlgt = sessionStorage.getItem('latlgt');//经纬度
          //获取4S店列表(3.9版本)
          let obj = {};
          obj.REGION = '';
          obj.COORDINATE = this.latlgt;
          obj.CITY = this.city;
          obj.MAINBRAND = '';
          obj.SORTING = 0;
          obj.SERV_CLASS_ID = typeId;
          this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{
                  //console.dir(res);
                 // alert(res.STATUS_CODE);
                  if(res.STATUS_CODE == 1){

                      this.allData = res.RESULT_DATA;
                      that.getPosition();
                  }
          },err=>console.log(err));
            //that.getPosition();
      },

      goBack(){
        //如果遮罩层显示，先关闭遮罩层
        if(this.isCover){
          this.isCover=false;
          return;
        }

        this.$router.go(-1)
      },
      //显示遮罩层
      showCover(){
        this.isCover=true;
      },
    	//获取定位
    	getPosition(){
    		 let that = this;
    		 let geolocation = new BMap.Geolocation();
				 geolocation.getCurrentPosition(function(r){
				 		var myIcon = new BMap.Icon(
				 			location//直接写相对路径不会显示，需要import
				 			,new BMap.Size(54,72)
				 		,{anchor: new BMap.Size(30,70)}//这个参数慢慢测
				 		);
						let mk = new BMap.Marker(r.point,{icon:myIcon});
						//let mk = new BMap.Marker(r.point);
						mk.disableMassClear();//禁止覆盖物在map.clearOverlays方法中被清除
						that.MAP.addOverlay(mk);//将覆盖物添加到地图中
						that.MAP.panTo(r.point);//将地图的中心点更改为给定的点
						that.yourPosition.lng = r.point.lng;//经度
		        that.yourPosition.lat = r.point.lat;//纬度
		        setTimeout(()=>that.getAllStoreLngLat(),1000);
		        //监听事件
		        mk.addEventListener("click",function(){
		        		//点击定位到中心
						   	that.MAP.panTo(new BMap.Point(r.point.lng,r.point.lat));
						});
				});

    	},
    	//获取所有门店经纬度
    	getAllStoreLngLat(){
    			let that = this;
           this.$vux.loading.hide();
    			for(let i=0,len=this.allData.length;i<len;i++){
    					let str = this.allData[i].COORDINATE.split(',');
    					let point = new BMap.Point(str[0],str[1]);
    					//console.log(point)
							var myIcon = new BMap.Icon(
				 			positionDefault//直接写相对路径不会显示，需要import
				 			,new BMap.Size(54,72)
				 			,{anchor: new BMap.Size(30,70)}//这个参数慢慢测
				 			);

						  let marker = new BMap.Marker(point,{icon:myIcon});
							//let marker = new BMap.Marker(point);
              //marker.disableMassClear();//禁止覆盖物在map.clearOverlays方法中被清除
							that.MAP.addOverlay(marker);

              that.iconList.push(marker)
							//单个门店的点击事件
              this.$vux.loading.hide();
							marker.addEventListener("click",function(e){
                     //this.hide();
                    that.isShow = true;

						   			that.storeData = that.allData[i];
						   			that.storePhone = that.storeData.SERV_PHONE;
						   			console.dir(that.storeData);
                   // alert(that.iconList.length);
                    for(let i=0;i<that.iconList.length;i++){

                      let myIcon3 = new BMap.Icon(
                        positionDefault//直接写相对路径不会显示，需要import
                        ,new BMap.Size(54,72)
                        ,{anchor: new BMap.Size(30,70)}//这个参数慢慢测
                        );
                        that.iconList[i].setIcon(myIcon3)
                    }


                     let icon1=this.getIcon();
                     icon1.setSize({
                        width:45,
                        height:60
                      })
                     icon1.setImageUrl(positionSelected)
                     icon1.setImageSize({
                        width:45,
                        height:60
                     })
                     icon1.setAnchor({
                        width:40,
                        height:95
                     })
                     this.setIcon(icon1)

							});
    			}
    	},
    	//拨打电话
    	callTel(){
    		let dom = document.getElementById('callTel');
    				dom.click();
    				dom.click();
    	},
    	//出行方式
    	goToWay(addr){

        //addr="14.036345,022.547786"
         // window.location.href="http://api.map.baidu.com/geocoder?address="+addr+"&output=html&src=cwt"

         // window.location.href="http://api.map.baidu.com/direction?origin=latlng:"+addr+"|name:我家&destination=世界之窗&mode=driving&region="+this.city+"&output=html&src=cwt"
         var str = addr.split(",")

         window.location.href="http://api.map.baidu.com/geocoder?location="+str[1]+","+str[0]+"&output=html&src=cwt"




        },
  },
  // 子组件
  components:{
    XHeader,
    Actionsheet,
    Popup,
    Alert,
    Toast,
    Confirm
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.weui-toast{
  height: 2.4rem!important;
  .weui-toast__content{
    margin-top: 0.03rem;
  }
}
.storeMap{
		height:100%;
  	#container{
  		width:100%;
  		height:100%;
  	}
  	.cafeStoreHeader{
			width:100%;
			height:0.88rem;
			display:flex;
			background:#fff;
			position:fixed;
			top:0;
			z-index:99;
			.cafeStoreHeaderTitle{
				width:100%;
				display:flex;
				justify-content:center;
        img{
          position:absolute;
          left: 1.17rem;
          top: 0.28rem;
          width: 0.32rem;
          height: 0.32rem;
          z-index: 100;
        }
				input{
          position: absolute;
          top: 0.11rem;
          left: 0.86rem;
          border:none;
          width: 5.6rem;
          height: 0.66rem;
          background: #f5f5f5;
          border-radius: 0.33rem;
          padding-left: 0.78rem;
        }
        span{
          position: absolute;
          right: 0.3rem;
          top: 0.26rem;
          font-size: 0.26rem;
          color: #666666;
        }
			}
			.cafeStoreHeaderImg{
				height:100%;
				width:0.6rem;
				display:flex;
				justify-content:center;
				position:absolute;
				left:0.3rem;
				bottom:0;
				img{
					align-self:center;
					width:0.2rem;
					height:0.37rem;
				}
			}
		}
    .topBar{
      position: fixed;
      top: 0.8rem;
      left: 0;
      width: 100%;
      height: 1rem;
      z-index: 99;
      background: #ffffff;
      font-size: 0.26rem;
      span{
        border:1px solid #ccc;
        width: 1.1rem;
        height: 0.56rem;
        border-radius: 0.25rem;
        margin-left:0.3rem;
        margin-top: 0.22rem;
        float: left;
        font-size: 0.26rem;
        display: flex;
        display:-webkit-flex;
        justify-content:center;
        align-items:center;
      }
    }
  	.storeInfo{
  			position:fixed;
  			bottom:0.2rem;
  			left:0.3rem;
  			width:6.9rem;
  			height:2.05rem;
  			z-index:99999;
  			background:#ffffff;
  			border-radius:0.2rem;
  			display:flex;
  			justify-content:center;
  			box-shadow:4px 4px 4px #9F9F9F;
  			.storeInfoContainer{
  				align-self:center;
  				width:6.55rem;
  				height:1.5rem;
  				display:flex;
  				.storeInfoImg{
  					width:2rem;
  					height:1.5rem;
  						img{
  								width:2rem;
  								height:1.5rem;
  						}
  				}
  				.storeInfoText{
  					 width:3.65rem;
  					 height:1.5rem;
  					 display:flex;
  					 flex-flow:column;
  					 .storeInfoText1{
  					 	display:flex;
  					 	height:0.5rem;
  					 	position:relative;
				 			h2{
				 				width:2.6rem;
				 				height:0.5rem;
			 					align-self:center;
				 				margin-left:0.2rem;
				 				font-size:0.3rem;
								font-weight:bold;
								color:#1a1a1a;
								text-align:left;
								/*让文字只显示2行，其余用...代替start*/
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                /*让文字只显示2行，其余用...代替end*/
				 			}
				 			p{
				 				position:absolute;
				 				top:0;
				 				right:0.2rem;
				 				font-size:0.22rem;
								color:#9b9b9b;
				 			}
  					 }
  					 .storeInfoText2{
  					 	height:0.7rem;
  					 	display:flex;
  					 	flex-flow:column;
  					 	justify-content:center;
  					 		p{
  					 			margin-left:0.2rem;
  					 			font-size:0.24rem;
									color:#9b9b9b;
									text-align:left;
									/*让文字只显示2行，其余用...代替start*/
	                overflow : hidden;
	                text-overflow: ellipsis;
	                display: -webkit-box;
	                -webkit-line-clamp: 2;
	                -webkit-box-orient: vertical;
	                /*让文字只显示2行，其余用...代替end*/
  					 		}
  					 }
  					 .storeInfoText3{
  					 	height:0.4rem;
  					 		p{
  					 			margin-left:0.2rem;
  					 			font-size:0.22rem;
									color:#ec2121;
									font-weight:lighter;
									text-align:left;
									/*让文字只显示2行，其余用...代替start*/
	                overflow : hidden;
	                text-overflow: ellipsis;
	                display: -webkit-box;
	                -webkit-line-clamp: 1;
	                -webkit-box-orient: vertical;
	                /*让文字只显示2行，其余用...代替end*/
  					 		}
  					 }
  				}
  				.storeInfoWay{
  					width:0.9rem;
  					height:1.5rem;
  					position:relative;
  					.storeInfoWayTel{
  						position:absolute;
  						left:0;
  						top:0;
  						display:flex;
  						img{
  							width:0.66rem;
  							height:0.66rem;
  						}
  					}
  					.storeInfoWayGo{
  						position:absolute;
  						left:0;
  						bottom:0;
  						display:flex;
  						img{
	  						width:0.66rem;
	  						height:0.66rem;
	  					}
  					}

  				}
  			}
  	}
  .cover{
    position: fixed;
    background: #ffffff;
    width: 100%;
    top: 0.88rem;
    left: 0;
    bottom: 0;
    z-index: 9999;
    padding-top: 0.5rem;
    padding-left: 0.3rem;

    .clearImg{
      position: absolute;
      top: 0.84rem;
      right: 0.26rem;
      width: 0.4rem;
      height: 0.4rem;
    }
    h3{
      font-size: 0.32rem;
      color: #333333;
      margin-bottom: 0.53rem;
      text-align: left;
    }
    .spanBox{
      color: #666666;
      font-size: 0.24rem;
      overflow: hidden;
      margin-bottom: 0.9rem;
      span{
        float: left;
        height: 0.56rem;
        padding: 0 0.3rem;
        border-radius: 0.28rem;
        margin-right: 0.24rem;
        margin-bottom: 0.24rem;
        border:1px solid #666666;
        display: flex;
        display:-webkit-flex;
        justify-content:center;
        align-items:center;
        text-align: center;
      }
    }

  }

}
</style>
